<template>
    <div>
        <div id="head">
            <div>社保交付</div>
            <div>全国385个地级市社保公积金一键购买</div>
            <router-link to="/consult/1/账号申请" tag="div">立即购买</router-link>
        </div>
        <div id="area">
            <div>各地社保公积金缴费明细</div>
            <div id="a_box">
                <router-link to="/beijingshi_shebao/" tag="div">北京</router-link>
                <router-link to="/shanghaishi_shebao/" tag="div">上海</router-link>
                <router-link to="/guangzhoushi_shebao/" tag="div">广州</router-link>
                <router-link to="/shenzhenshi_shebao/" tag="div">深圳</router-link>
            </div>
            <div id="a_other" @click="showCity()">其他城市>></div>
        </div>
        <div id="intro" v-for="intro in intros" :key="intro.title">
            <div>{{intro.title}}</div>
            <div :style="{'background-image': 'url('+ intro.img +')'}"></div>
            <div>
                <p v-for="text in intro.text">{{text}}</p>
            </div>
            <router-link v-if="intro.link" :to="intro.link" tag="div">{{intro.btn}}</router-link>
        </div>
        <div id="ad">
            <div>他们都在使用</div>
            <div></div>
            <div>他们都在用爱员工<br>他们都在用爱员工他们都在用爱员工</div>
        </div>
        <div id="msg">
            <lslide :height="8.4">
                <litem name="最新资讯">
                    <Sitem v-for="msg in zx" :key="msg.img" :msg="msg"/>
                    <more url="/news/"/>
                </litem>
                <litem name="常见问题">
                    <div style="height: 0.3rem"></div>
                    <Aitem v-for="msg in ques" :key="msg.img" margin="0 0 0.3rem" :msg="msg"/>
                    <more url="/zt/106"/>
                </litem>
            </lslide>
        </div>
    </div>
</template>
<script>
import lslide from "./public/LSlide_cs"
import litem from "./public/Litem"
import Sitem from "./public/Sitem"
import Aitem from "./public/Aitem"
import more from "./public/More"
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      intros: [
        {
          title: "企业在线社保购买系统",
          img: require("../assets/shebao/img_0.png"),
          text: [
            "全国385个城市落地服务商",
            "异地员工社保一键搞定",
            "平台推荐各地最优质的落地服务商",
            "提高hr日常效率，减少人力成本",
            "数据全程加密，保证信息安全"
          ],
          btn: "马上使用",
          link: "/consult/1/账号申请"
        },
        {
          title: "全国社保服务商系统",
          img: require("../assets/shebao/img_1.png"),
          text: [
            "人力资源服务商对接系统，全国",
            "385个城市落地服务商共同协作",
            "一个平台385个网点，减低自建",
            "网点交付成本",
            "纯线上操作提高人工效率"
          ],
          btn: "马上注册使用",
          link: "/consult/1/账号申请"
        }
      ],
      zx: null,
      ques: null
    };
  },
  components: {
    lslide,
    litem,
    Sitem,
    Aitem,
    more
  },
  activated() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
    this.$parent.updata()
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.zx = data
    }.bind(this))
    Post(`${Port}/mobile/cms/subjects`, {
      page_size: 2
    }, function(data) {
      this.ques = data
    }.bind(this))
  },
  methods: {
    showCity() {
      this.$parent.cshow = true
      this.$parent.ctype = 0
    }
  }
};
</script>
<style scoped>
#head {
  height: 6.17rem;
  padding-top: 1.4rem;
  background-image: url("~@/assets/shebao/banner.png");
  background-size: cover;
  text-align: center;
}
#head > div:nth-child(1) {
  font-size: 0.42rem;
  color: #fff;
}
#head > div:nth-child(2) {
  font-size: 0.28rem;
  color: #fff;
  margin-top: 0.2rem;
}
#head > div:nth-child(3) {
  display: inline-block;
  width: 2.1rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  border: 0.01rem solid #ed5172;
  font-size: 0.28rem;
  line-height: 0.62rem;
  color: #ed5172;
  margin-top: 0.4rem;
}
#area {
  padding-top: 1.5rem;
  text-align: center;
}
#area > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#a_box {
  display: flex;
  justify-content: space-around;
  margin-top: 0.55rem;
}
#a_box > div {
  height: 1.25rem;
  width: 1.25rem;
  border: 0.01rem solid #ed5172;
  border-radius: 50%;
  font-size: 0.3rem;
  line-height: 1.25rem;
  color: #ed5172;
}
#a_other {
  font-size: 0.28rem;
  color: #999;
  text-align: right;
  margin: 0.55rem 0.32rem 0;
}
#intro {
  text-align: center;
  margin: 1.2rem 0;
}
#intro > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#intro > div:nth-child(2) {
  margin-top: 0.5rem;
  height: 2.5rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#intro > div:nth-child(3) {
  margin-top: 0.8rem;
  font-size: 0.28rem;
  color: #999;
}
#intro > div:nth-child(4) {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: 0.28rem;
  color: #ed5172;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.29rem;
  border: 0.01rem solid #ed5172;
  margin-top: 1rem;
}
#ad {
  height: 6.9rem;
  padding-top: 1.6rem;
  text-align: center;
  background-color: #f4f5f7;
}
#ad > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#ad > div:nth-child(2) {
  height: 1.6rem;
  margin-top: 0.6rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/shebao/ad.png");
}
#ad > div:nth-child(3) {
  margin-top: 0.4rem;
  font-size: 0.28rem;
  color: #999;
}
</style>